<template>
  <div :style="defaultStyle" :class="isActiveClass">
    <div v-if="contentData.layout === 'list'" :style="contentStyle">
      <div class="coupon-list">
        <div class="coupon-item" v-for="(item, index) in contentData.default_sub_list" :key="index">
          <div class="coupon-item__left">
            <div class="price-wrapper" v-if="item.type === 1">
              <span class="symbol">¥</span>
              <span class="amount">{{ item.discountAmount }}</span>
            </div>
            <div class="price-wrapper" v-else-if="item.type === 2">
              <span class="amount">{{ item.discountRate }}</span>
              <span class="symbol">折</span>
            </div>
            <div class="condition">满{{ item.minConsumption }}元可用</div>
          </div>
          <div class="coupon-item__center">
            <div class="info-main">
              <div class="title">{{ item.name }}</div>
              <div class="expiry">{{
                getExpiryText(item.expiryType, item.validityDays, item.endTime)
              }}</div>
            </div>
            <div class="restrictions">
              <span style="color: #9e9e9e" v-if="item.scope === 1">全场景通用</span>
              <span v-if="item.scope === 2">限购买班型可用</span>
              <span v-if="item.scope === 3">限购买会员卡可用</span>
            </div>
          </div>
          <div class="coupon-item__right">
            <div class="use-button">去使用</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      overflow: 'hidden'
    }
  })

  function getExpiryText(expiryType: number, validityDays?: number, endTime?: string): string {
    const now = new Date()

    if (expiryType === 1 && validityDays) {
      const target = new Date(now.getTime() + validityDays * 24 * 60 * 60 * 1000)

      const yyyy = target.getFullYear()
      const mm = String(target.getMonth() + 1).padStart(2, '0')
      const dd = String(target.getDate()).padStart(2, '0')

      return `有效期至 ${yyyy}/${mm}/${dd} 23:59`
    }

    if (expiryType === 2 && endTime) {
      const target = new Date(endTime.replace(/-/g, '/')) // Safari 兼容
      const yyyy = target.getFullYear()
      const mm = String(target.getMonth() + 1).padStart(2, '0')
      const dd = String(target.getDate()).padStart(2, '0')
      const hh = String(target.getHours()).padStart(2, '0')
      const mi = String(target.getMinutes()).padStart(2, '0')

      return `有效期至 ${yyyy}/${mm}/${dd} ${hh}:${mi}`
    }

    return '有效期未知'
  }
</script>

<style lang="scss" scoped>
  .coupon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .coupon-item {
    display: flex;
    align-items: stretch;
    background-color: #fff;
    border-radius: 12px;
    padding: 0 6px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      background-color: #fa2b2b;
      border-radius: 8px 0 0 8px;
    }
  }

  .coupon-item__left {
    width: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background-color: #f5f5f5;
      border-radius: 50%;
      left: 100%;
      transform: translateX(-50%);
      z-index: 1;
    }

    &::before {
      top: -8px;
    }

    &::after {
      bottom: -8px;
    }
  }

  .price-wrapper {
    color: #fa2b2b;
    font-weight: bold;
    display: flex;
    align-items: baseline;

    .symbol {
      font-size: 14px;
    }
    .amount {
      font-size: 28px;
      line-height: 1;
    }
    .decimal {
      font-size: 14px;
    }
  }

  .condition {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
  }

  .coupon-item__center {
    flex: 1;
    padding: 15px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    overflow: hidden;
  }

  .info-main {
    .title {
      font-size: 15px;
      font-weight: bold;
      color: #333;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .expiry {
      font-size: 11px;
      color: #999;
      margin-top: 6px;
    }
  }

  .restrictions {
    font-size: 10px;
    color: #ff3c29;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }

  .coupon-item__right {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .use-button {
    background-color: #fa2b2b;
    color: #fff;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 500;
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
